<template>
  <div class="responsive-nav">
    <Header class="desktop-nav" />
    <MobileNav class="mobile-nav" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Header from './Header.vue'
import MobileNav from './MobileNav.vue'

export default defineComponent({
  name: 'ResponsiveNav',
  
  components: {
    Header,
    MobileNav
  }
})
</script>

<style lang="scss">
.responsive-nav {
  .desktop-nav {
    display: none !important;
  }
  
  .mobile-nav {
    display: block !important;
  }
}

@media screen and (min-width: 769px) {
  .responsive-nav {
    .desktop-nav {
      display: block !important;
    }
    
    .mobile-nav {
      display: none !important;
    }
  }
}
</style> 